<div class="row" ng-controller="contentTemps">
    <% include public/modal %>
    <div class="col-xs-12">
        <div class="panel">
            <a href="#addContentTemps" role="button" class="btn btn-primary btn-sm" data-toggle="modal"><span class="fa fa-plus-square" aria-hidden="true">&nbsp;</span>增加一个新模板</a>
        </div>
        <div class="box">
            <div class="box-body" >
                <p class="alert alert-danger">注意：一个模板组合包含三部分：模板首页，分类列表，文档详情；选择一个模板组合相当于定义了一套模板</p>
                <table id="" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>选择</th>
                        <th>模板名称</th>
                        <th>模板组合名称</th>
                        <th>管理</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="temp in data">
                        <td><input type="checkbox" class="mini"/></td>
                        <td class="  sorting_1">{{temp.name}}</td>
                        <td class=" ">{{temp.alias}}</td>
                        <td class=" ">{{temp.comments}}</td>
                        <td class=" ">
                            <button class="btn btn-primary btn-xs" data-whatever="{{temp._id}}" data-toggle="modal" data-target="#addContentTemps"><span class="fa fa-fw fa-edit" aria-hidden="true"></span>编辑</button>&nbsp;
                            <button class="btn btn-default btn-xs" ng-click="delTempItem(temp._id)"><span class="fa fa-fw fa-trash-o" aria-hidden="true"></span>删除</button>
                        </td>
                    </tr>
                    </tbody>

                </table>

            </div><!-- /.box-body -->
            <div class="box-footer">
                <!--分页-->
                <% include public/pagination %>
            </div>
        </div><!-- /.box -->

    </div><!-- /.col -->


    <!--添加用户组模态窗口-->
    <div class="modal fade" id="addContentTemps">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加文章模板</h4>
                </div>
                <div class="modal-body">
                    <form role="form" class="form-horizontal" name="myForm" ng-submit="processForm(myForm.$valid)" novalidate>
                        <div class="form-group">
                            <label class="control-label col-sm-4">模板名称</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="name" ng-model="formData.name" ng-minlength="1" ng-maxlength="12" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="myForm.name.$invalid && !myForm.name.$pristine"><i class="fa fa-times-circle-o"></i> 1-12个非特殊字符</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">模板组合</label>
                            <div class="col-sm-5">
                                <div class="dropdown">
                                    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i id="tempForderName">请选择模板组合</i>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" id="tempForderTree" class="ztree">
                                        <li role="presentation"><a href="#">test</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">备注</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="comments" ng-model="formData.comments" ng-minlength="1" ng-maxlength="30" placeholder="暂时填写备注" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="myForm.comments.$invalid && !myForm.comments.$pristine"><i class="fa fa-times-circle-o"></i> 备注不能为空</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">提交</button>
                        </div>
                    </form>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div><!-- /.row -->

</div>


<script>
    /*targetID:全局对应指定记录的标记，在修改和删除时使用*/

    doraApp.controller("contentTemps",function($scope,$http){
//                读取模板文件夹列表
        getTempFolderList($scope,$http)
//                初始化名称和权限
        $scope.formData = {};
        //获取模板列表
        initPagination($scope,$http,"<%=bigCategory%>","<%=searchKey%>");
        //删除模板
        $scope.delTempItem = function(id){
            initCheckIfDo($scope,id,'您确认要删除该标签吗？',function(currentID){
                angularHttpGet($http,"/admin/manage/<%=bigCategory%>/del?uid="+currentID,function(){
                    initPagination($scope,$http,"<%=bigCategory%>","<%=searchKey%>");
                });
            });
        };


//      修改模板
        $('#addContentTemps').on('show.bs.modal', function (event) {
            var obj = $(event.relatedTarget);
            var editId = obj.data('whatever');
            var modalTitle = $(this).find('.modal-title');
//                    如果不为空则为编辑状态
            if(editId){
                modalTitle.text("编辑文章模板");
                $http.get("/admin/manage/<%=bigCategory%>/item?uid="+editId).success(function(result){
                    $scope.formData = result;
                    $scope.targetID = editId;
                    getTempFolderList($scope,$http)
                })
            }else{
                modalTitle.text("添加新模板");
                $scope.formData = {};
            }
        }).on('hidden.bs.modal', function (e) {
            // 清空数据
            $scope.formData = {};
            $scope.targetID ="";
            $(this).find("input").val("");
        });

//                添加新模板
        $scope.processForm = function(isValid){
            var curentUrl = "/admin/manage/<%=bigCategory%>/addOne";
            if($scope.targetID)
            {
                curentUrl = "/admin/manage/<%=bigCategory%>/modify?uid="+$scope.targetID;
            }

            angularHttp($http,isValid,'POST',curentUrl,$scope.formData,function(data){
                initPagination($scope,$http,"<%=bigCategory%>","<%=searchKey%>");
            });

        }
    });



    function getTempFolderList($scope,$http){

        var currentCate = '';
        if($scope.formData){
            currentCate = $scope.formData.alias;
        }

        iniNormalTree($http,'tempForderTree',"/admin/manage/contentTemps/forderList",'tempForderName',currentCate,function(e, treeId, treeNode){
            var zTree = $.fn.zTree.getZTreeObj("tempForderTree"),
                    nodes = zTree.getSelectedNodes(),
                    v = "";

            nodes.sort(function compare(a,b){return a.id-b.id;});
            for (var i=0, l=nodes.length; i<l; i++) {
                v += nodes[i].name ;
            }
            $('#tempForderName').html(v);
            $scope.formData.alias = v;
        });

    }
</script>